<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-20 16:04:20
 * @LastEditTime: 2019-09-20 16:45:13
 * @LastEditors: Please set LastEditors
 -->
<template>
    <div>
        <view class="weui-cells weui-cells1">
            <view class="weui-cell weui-cell_input">
                <view class="weui-cell__hd">
                    <view class="weui-label">课程名称</view>
                </view>
                <view class="weui-cell__bd">
                    <input class="weui-input" value='语文' />
                </view>
            </view>
            <view class="weui-cell weui-cell_input">
                <view class="weui-cell__hd">
                    <view class="weui-label">课程地点</view>
                </view>
                <view class="weui-cell__bd">
                    <input class="weui-input" placeholder='课程地点' />
                </view>
            </view>
            <view class="weui-cell weui-cell_input">
                <view class="weui-cell__hd">
                    <view class="weui-label">课程时间</view>
                </view>
                <view class="weui-cell__bd">
                    <input class="weui-input" value='1小时' />
                </view>
            </view>
            <view class="weui-cell weui-cell_input">
                <view class="weui-cell__hd">
                    <view class="weui-label">课程老师</view>
                </view>
                <view class="weui-cell__bd">
                    <input class="weui-input" value='张老师' />
                </view>
            </view>
            <view class="weui-cell weui-cell_input">
                <view class="weui-cell__hd">
                    <view class="weui-label">开始时间</view>
                </view>
                <view class="weui-cell__bd">
                    <picker mode="time" class="weui-input" :value="time" start="09:01" @change.stop="bindTimeChange" end="21:01">
                    <view class="picker">
                        {{time}}
                    </view>
                    </picker>
                </view>
            </view>
            <view class="weui-cell weui-cell_input">
                <view class="weui-cell__hd">
                    <view class="weui-label">结束时间</view>
                </view>
                <view class="weui-cell__bd">
                    <picker mode="time" class="weui-input" :value="time2" start="09:01" @change.stop="bindTimeChange2" end="21:01">
                    <view class="picker">
                        {{time2}}
                    </view>
                    </picker>
                </view>
            </view>
            <view class="weui-cells weui-cells_after-title">
                <view class="weui-cell weui-cell_switch">
                    <view class="weui-cell__bd" style="float:left">
                        <view class="weui-label">是否提醒</view>
                    </view>
                    <view class="weui-cell__ft">
                        <view class="weui-input">
                            <switch color='#00a4ff' checked />
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="page__bd page__bd_spacing">
            <button class="weui-btn" type="lans">保存</button>
            <button class="weui-btn" type="reds">删除</button>
        </view>
    </div>
</template>

<script>
export default {
    data(){
        return {
            showTopTips: false,
            radioItems: [
                { name: 'cell standard', value: '0' },
                { name: 'cell standard', value: '1', checked: true }
            ],
            checkboxItems: [
                { name: 'standard is dealt for u.', value: '0', checked: true },
                { name: 'standard is dealicient for u.', value: '1' }
            ],
            date: "2016-09-01",
            time: "9:00",
            time2: "10:00",
            countryCodes: ["+86", "+80", "+84", "+87"],
            countryCodeIndex: 0,

            countries: ["中国", "美国", "英国"],
            countryIndex: 0,

            accounts: ["微信号", "QQ", "Email"],
            accountIndex: 0,

            isAgree: false
        }
    },
    methods:{
        setData(obj){
            this.$set(this,Object.keys(obj)[0],Object.values(obj)[0])
        },
        showTopTips: function () {
            var that = this;
            this.setData({
                showTopTips: true
            });
            setTimeout(function () {
            that.setData({
                showTopTips: false
            });
            }, 3000);
        },
        radioChange: function (e) {
            console.log('radio发生change事件，携带value值为：', e.mp.detail.value);

            var radioItems = this.data.radioItems;
            for (var i = 0, len = radioItems.length; i < len; ++i) {
            radioItems[i].checked = radioItems[i].value == e.mp.detail.value;
            }

            this.setData({
            radioItems: radioItems
            });
        },
        checkboxChange: function (e) {
            console.log('checkbox发生change事件，携带value值为：', e.mp.detail.value);

            var checkboxItems = this.data.checkboxItems, values = e.mp.detail.value;
            for (var i = 0, lenI = checkboxItems.length; i < lenI; ++i) {
            checkboxItems[i].checked = false;

            for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
                if (checkboxItems[i].value == values[j]) {
                checkboxItems[i].checked = true;
                break;
                }
            }
            }

            this.setData({
            checkboxItems: checkboxItems
            });
        },
        bindDateChange: function (e) {
            this.setData({
                date: e.mp.detail.value
            })
        },
        bindTimeChange: function (e) {
            this.setData({
                time: e.mp.detail.value
            })
        },
        bindTimeChange2: function (e) {
            console.log(e)
            this.setData({
                time2: e.mp.detail.value
            })
        },
        bindCountryCodeChange: function (e) {
            console.log('picker country code 发生选择改变，携带值为', e.mp.detail.value);

            this.setData({
                countryCodeIndex: e.mp.detail.value
            })
        },
        bindCountryChange: function (e) {
            console.log('picker country 发生选择改变，携带值为', e.mp.detail.value);

            this.setData({
            countryIndex: e.mp.detail.value
            })
        },
        bindAccountChange: function (e) {
            console.log('picker account 发生选择改变，携带值为', e.mp.detail.value);

            this.setData({
            accountIndex: e.mp.detail.value
            })
        },
        bindAgreeChange: function (e) {
            this.setData({
            isAgree: !!e.mp.detail.value.length
            });
        }
    }
}
</script>


<style lang="less" scoped>
.weui-cell_input{
    height: 80rpx;
    border-bottom:1rpx solid #eeeeee;
    box-sizing:border-box;
    padding:20rpx 30rpx !important;
}
.weui-cell__hd{
    float: left;
}
.weui-cell{
        
}
.button-hover[type=lans] {
  color: rgba(255, 255, 255, 0.6);
  background-color: #00a4ff;
}

button[type=lans] {
color:#fff;
background-color:#00a4ff;
width:48%;
float:left;
margin-top:0px;
margin-right:2%;
margin-left:0%;
}
.button-hover[type=reds] {
  color: rgba(255, 255, 255, 0.6);
  background-color: #ff6464;
}

button[type=reds] {
color:#fff;
background-color:#ff6464;
width:48%;
float:left;
margin-top:0px;
margin-right:0%;
margin-left:2%;
}
.button-hover {
  color: rgba(0, 0, 0, 0.6);
  background-color: #dedede;
}


.button-sp-area {
  margin: 0 auto;
  padding-top: 15px;
  width: 60%;
}

.mini-btn {
  margin-right: 5px;
}

.weui-cells1 {
  margin-top: 1px;
}

.weui-cells2 {
  margin-top: 20rpx;
}

.weui-cells2::before, .weui-cells1::before {
  border: none;
}

.weui-cell {
  padding: 5px 15px;
}

.weui-cells2::after, .weui-cells1::after, .weui-cells:before, .weui-cells::after {
  border: none;
}

.weui-cell:before, .weui-cells::before {
  border-top: 1px solid #eee;
}


.weui-uploader__input {
  opacity: 1;
  background: #f4f5f8;
  color: #999899;
  font-size: 16px;
  text-align: center;
  border-radius: 5px;
}

.weui-uploader__input-box {
  width: 233rpx;
  height: 233rpx;
  border: none;
  border-radius: 20rpx;
}

.weui-uploader__input .icon {
  font-size: 40px;
  display: block;
  text-align: center;
  color: #999899;
  padding-top: 40rpx;
  margin-bottom: -10rpx;
}

.weui-input {
  text-align: right;
  font-size: 30rpx;
  color: #333;
}

.weui-label {
  font-size: 30rpx;
  color: #333;
}

.picker{text-align: right;}
.weui-input switch{float: right;margin-right:-8px;}
.page__bd_spacing{margin-top: 60px;}
</style>
